import PropTypes from 'prop-types';
import React, { memo } from 'react';
import { SectionV3Wrapper } from './style';
import SectionHeader from 'src/compoments/section-header';
import RoomItem from 'src/compoments/room-item';
import ScrollView from 'src/base-ui/scroll-view';
import SectionFooter from 'src/compoments/section-footer';

const HomeSectionV3 = memo((props) => {
  const { infoData } = props;
  return (
    <SectionV3Wrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <div className="item-list">
        <ScrollView>
          {infoData?.list?.map((item) => (
            <RoomItem itemData={item} key={item.id} itemWidth="20%" />
          ))}
        </ScrollView>
      </div>
      <SectionFooter name='PLUS' />
    </SectionV3Wrapper>
  );
});

HomeSectionV3.propTypes = {
  infoData: PropTypes.object,
};

export default HomeSectionV3;
